<!--
  文件级注释：用户管理页面（Users.vue）
  功能：展示用户列表，并提供新增平台类型角色成员的能力。
  接口：新增用户调用后端 /Organization/AddTeamMembers，成功判定为返回 code === 0。
  异常：网络异常或服务端返回非 0 code 时，通过 toast 显示错误信息。
-->
<template>
  <div class="container fade-in">
    <div class="header">
      <h2 class="section-title">用户管理</h2>
      <div class="actions">
        <button class="btn primary" @click="openAddModal">
          <span class="icon">➕</span>
          新增用户
        </button>
        <button class="btn secondary" @click="loadUsers">
          <span class="icon">🔄</span>
          刷新
        </button>
      </div>
    </div>

    <div class="card filters slide-up" style="animation-delay: 0.2s">
      <div class="filter-row">
        <label class="filter-label">用户名</label>
        <input v-model="filters.key" class="input flex-1" placeholder="输入用户名搜索" @input="debouncedSearch" />
        <label class="filter-label" style="margin-left:12px">每页条数</label>
        <select v-model="pagination.pageSize" class="input" style="width:100px" @change="changePageSize">
          <option :value="10">10</option>
          <option :value="20">20</option>
          <option :value="50">50</option>
        </select>
        <button class="btn secondary" @click="resetFilters">重置</button>
      </div>
    </div>

    <div class="card table-container slide-up" style="animation-delay: 0.3s">
      <div class="table-header">
        <h3>用户列表</h3>
      </div>
      <table class="table">
        <thead>
          <tr>
            <th>用户名</th>
            <th>手机号</th>
            <th>邮箱</th>
            <th>状态</th>
            <th>最近登录</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="loading" class="loading-row">
            <td colspan="7" class="loading">
              <div class="spinner"></div>
              加载中...
            </td>
          </tr>
          <tr v-else-if="users.length === 0" class="empty-row">
            <td colspan="7" class="empty">暂无数据</td>
          </tr>
          <template v-else>
            <tr v-for="u in users" :key="u.id || u.Id" class="data-row">
              <td>
                <a class="link" href="javascript:void(0)" @click="viewDetail(u)">{{ (u.name ?? u.Name) || '-' }}</a>
              </td>
              <td>{{ (u.phone ?? u.Phone) || '-' }}</td>
              <td>{{ (u.email ?? u.Email) || '-' }}</td>
              <td>
                <span class="badge" :class="enableBadge((u.enableStatus ?? u.EnableStatus))">
                  {{ enableText((u.enableStatus ?? u.EnableStatus)) }}
                </span>
              </td>
              <td>{{ formatDate(u.lastLoginTime ?? u.LastLoginTime) }}</td>
              <td>{{ formatDate(u.creationTime ?? u.CreationTime) }}</td>
              <td>
                <div class="actions">
                  <button class="btn small" :disabled="(toggleLoadingId === (u.id ?? u.Id))" :class="(u.enableStatus ?? u.EnableStatus) === 1 ? 'secondary' : 'primary'" @click="toggleEnable(u)">
                    <span class="icon">{{ (u.enableStatus ?? u.EnableStatus) === 1 ? '⏸️' : '▶️' }}</span>
                    {{ (u.enableStatus ?? u.EnableStatus) === 1 ? '禁用' : '启用' }}
                  </button>
                  <button class="btn small" @click="viewDetail(u)">
                    <span class="icon">📄</span>
                    详情
                  </button>
                  <button class="btn small danger" :disabled="true" title="暂不开放删除">
                    <span class="icon">🗑️</span>
                    删除
                  </button>
                </div>
              </td>
            </tr>
          </template>
        </tbody>
      </table>

      <div v-if="pagination.total > 0" class="pagination">
        <div class="pagination-info">
          共 {{ pagination.total }} 条记录，第 {{ pagination.current }} / {{ Math.ceil(pagination.total / pagination.pageSize) }} 页
        </div>
        <div class="pagination-controls">
          <button class="btn secondary sm" :disabled="pagination.current <= 1" @click="changePage(pagination.current - 1)">上一页</button>
          <button class="btn secondary sm" :disabled="pagination.current >= Math.ceil(pagination.total / pagination.pageSize)" @click="changePage(pagination.current + 1)">下一页</button>
        </div>
      </div>
    </div>

    <!-- 新增用户弹窗 -->
    <div v-if="showAddModal" class="modal-backdrop" @click.self="closeAddModal">
      <div class="modal">
        <div class="modal-header">
          <h3>新增用户</h3>
        </div>
        <div class="modal-body">
          <div class="form-row">
            <label class="form-label">成员昵称</label>
            <input v-model="addForm.Name" class="input" placeholder="请输入昵称（可选）" />
          </div>
          <div class="form-row">
            <label class="form-label">手机号</label>
            <input v-model="addForm.Phone" class="input" placeholder="请输入手机号（必填）" />
          </div>
          <div class="form-row">
            <label class="form-label">分配角色</label>
            <select v-model="roleForm.roleId" class="input" style="width:260px">
              <option :value="''">请选择平台角色（必选）</option>
              <option v-for="r in platformRoles" :key="r.Id" :value="String(r.Id)">{{ r.RoleName }}（平台）</option>
            </select>
          </div>
          
          <div v-if="addError" class="error-text">{{ addError }}</div>
        </div>
        <div class="modal-footer">
          <button class="btn secondary" @click="closeAddModal">取消</button>
          <button class="btn primary" :disabled="submitting" @click="submitAdd">
            <span class="icon">✅</span>
            {{ submitting ? '提交中...' : '提交' }}
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 轻提示 -->
  <div v-if="toast.show" class="toast" :class="toast.type">{{ toast.text }}</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getUserList, banUser, deleteUser, type UserListItem } from '../services/user'
import { OrganizationService, type RoleItem } from '../services/organization'
import { isSuccess } from '../services/types'

/**
 * 文件级注释：
 * 用户管理页面，参考商户管理页面实现列表、搜索、分页与基础操作（新增、启用/禁用、删除）。
 * 前端统一以返回值 code === 0 判断为成功，异常通过轻提示展示。
 */

const loading = ref(false)
const users = ref<UserListItem[]>([])
const filters = reactive({ key: '' })
const pagination = reactive({ current: 1, pageSize: 10, total: 0 })
const router = useRouter()
// 切换启用/禁用加载中的用户ID（用于按钮禁用）
const toggleLoadingId = ref<string>('')

// 轻提示
const toast = reactive<{ show: boolean; text: string; type: 'success' | 'danger' | 'secondary' }>({ show: false, text: '', type: 'secondary' })

// 新增弹窗
const showAddModal = ref(false)
const submitting = ref(false)
const addError = ref('')
// 新增成员基础信息（昵称/手机号）
const addForm = reactive<{ Name: string; Phone: string }>({ Name: '', Phone: '' })
// 新增成员角色与组织信息
const roleForm = reactive<{ roleId: string; merchantId: string; storeId: string }>({ roleId: '', merchantId: '', storeId: '' })
// 角色列表（全部）
// 平台角色列表（仅平台组织类型）
const platformRoles = ref<RoleItem[]>([])

/**
 * 函数级注释：加载平台角色列表（平台管理员/平台超级管理员）
 * @returns void
 * @throws 可能抛出网络或服务端异常
 */
/**
 * 函数级注释：加载全部角色选项
 * @returns void
 * @throws 可能抛出网络或服务端异常
 */
/**
 * 函数级注释：加载平台角色选项（仅 OrganizationType === 0）
 * @returns void
 * @throws 可能抛出网络或服务端异常
 */
/**
 * 加载平台角色选项（仅 OrganizationType === 0）
 * @function loadPlatformRoles
 * @param None 无参
 * @returns Promise<void> 无返回，更新 platformRoles 响应式数据
 * @throws 可能抛出网络或服务端异常
 */
async function loadPlatformRoles() {
  try {
    const res = await OrganizationService.getRoleList({ OrgTypeList: [0] })
    if (isSuccess(res) && Array.isArray(res.data)) {
      platformRoles.value = (res.data as RoleItem[]).filter(r => (r.OrganizationType ?? (r as any).organizationType ?? 0) === 0)
    } else {
      platformRoles.value = []
    }
  } catch (e: any) {
    platformRoles.value = []
  }
}

/**
 * 函数级注释：防抖函数
 * @param fn 需要防抖执行的函数
 * @param delay 延迟毫秒数
 * @returns 包装后的防抖函数
 */
function debounce<T extends (...args: any[]) => void>(fn: T, delay = 300) {
  let t: any
  return (...args: any[]) => {
    clearTimeout(t)
    t = setTimeout(() => fn(...args), delay)
  }
}

const debouncedSearch = debounce(() => {
  pagination.current = 1
  loadUsers()
}, 300)

/**
 * 函数级注释：格式化日期
 * @param v 原始日期字符串
 * @returns 中文本地时间字符串，或 '-'
 */
function formatDate(v?: string) {
  if (!v) return '-'
  try { return new Date(v).toLocaleString('zh-CN') } catch { return v }
}

/**
 * 函数级注释：状态文本
 * @param s 启用状态：1启用，0禁用
 * @returns 中文状态文本
 */
function enableText(s?: number) {
  if (s === 1) return '启用'
  if (s === 0) return '禁用'
  return '未知'
}

/**
 * 函数级注释：状态徽章样式
 * @param s 启用状态
 * @returns 样式类名
 */
function enableBadge(s?: number) {
  return s === 1 ? 'active' : 'inactive'
}

/**
 * 函数级注释：加载用户列表
 * @returns void 无返回值，直接更新响应式数据
 * @throws 可能抛出网络异常
 */
async function loadUsers() {
  loading.value = true
  try {
    const res = await getUserList(pagination.current, pagination.pageSize, filters.key)
    if (isSuccess(res) && res.data) {
      users.value = res.data.data || []
      pagination.total = res.data.total || users.value.length
    } else {
      users.value = []
      pagination.total = 0
      showToast(res?.message || '获取用户列表失败', 'danger')
    }
  } catch (e: any) {
    showToast(e?.message || '接口异常', 'danger')
  } finally {
    loading.value = false
  }
}

/**
 * 函数级注释：切换页码
 * @param p 目标页码
 * @returns void
 */
function changePage(p: number) {
  pagination.current = p
  loadUsers()
}

/**
 * 函数级注释：变更页大小并刷新
 * @returns void
 */
function changePageSize() {
  pagination.current = 1
  loadUsers()
}

/**
 * 函数级注释：重置筛选并刷新列表
 * @returns void
 */
function resetFilters() {
  filters.key = ''
  pagination.current = 1
  loadUsers()
}

/**
 * 函数级注释：启用/禁用用户
 * @param u 用户列表项
 * @returns void
 */
async function toggleEnable(u: UserListItem) {
  const id = (u.id ?? u.Id) || ''
  if (!id) return
  const target = (u.enableStatus ?? u.EnableStatus) === 1 ? 0 : 1
  // 简单确认弹窗，避免误操作
  const ok = window.confirm(target === 1 ? '确认启用该用户吗？' : '确认禁用该用户吗？')
  if (!ok) return
  try {
    toggleLoadingId.value = id
    const res = await banUser([id], target)
    if (isSuccess(res)) {
      showToast(target === 1 ? '已启用' : '已禁用', 'success')
      loadUsers()
    } else {
      showToast(res?.message || '操作失败', 'danger')
    }
  } catch (e: any) {
    showToast(e?.message || '接口异常', 'danger')
  } finally {
    toggleLoadingId.value = ''
  }
}

/**
 * 函数级注释：删除用户
 * @param u 用户列表项
 * @returns void
 */
async function removeUser(u: UserListItem) {
  // 暂不开放删除，按钮已禁用，此方法保留但不执行
  showToast('删除功能暂未开放', 'secondary')
}

/**
 * 函数级注释：跳转到用户详情页
 * @param u 用户列表项（用于传递 name/phone 便于详情页查询）
 * @returns void
 */
/**
 * 函数级注释：跳转到用户详情页（使用命名路由确保稳定）
 * @param u 用户列表项（用于传递 name/phone 便于详情页查询）
 * @returns void 无返回
 * @throws 不抛出异常；当 ID 为空时不进行跳转
 */
function viewDetail(u: UserListItem) {
  const id = String(u.id ?? u.Id ?? '')
  const name = (u.name ?? u.Name) || ''
  const phone = (u.phone ?? u.Phone) || ''
  if (!id) return
  // 使用命名路由，避免 path 组合在不同 base/嵌套路由下发生不匹配
  router.push({ name: 'UserDetail', params: { id }, query: { name, phone } })
}

// 需求调整：用户管理首页不提供复制ID与复制手机号操作，故移除相关按钮与方法。

/**
 * 函数级注释：打开新增弹窗
 * @returns void
 */
/**
 * 打开新增用户弹窗
 * @function openAddModal
 * @param None 无参
 * @returns void 无返回，重置表单并加载平台角色
 * @throws 无主动抛出的异常
 */
function openAddModal() {
  addForm.Name = ''
  addForm.Phone = ''
  addError.value = ''
  roleForm.roleId = ''
  roleForm.merchantId = ''
  roleForm.storeId = ''
  // 加载平台角色选项
  loadPlatformRoles()
  showAddModal.value = true
}

/**
 * 函数级注释：关闭新增弹窗
 * @returns void
 */
function closeAddModal() { showAddModal.value = false }

/**
 * 函数级注释：提交新增用户
 * @returns void
 */
/**
 * 函数级注释：提交新增成员（直接对接 AddTeamMembersAsync）
 * @returns void
 * @throws 可能抛出网络或服务端异常
 */
/**
 * 提交新增用户（仅支持平台类型角色）
 * @function submitAdd
 * @param None 无参
 * @returns Promise<void> 无返回，提交后刷新列表并关闭弹窗
 * @throws 可能抛出网络异常；服务端失败时不抛出异常，显示错误信息
 */
async function submitAdd() {
  // 基础校验
  if (!addForm.Phone) {
    addError.value = '请填写手机号'
    return
  }
  if (!roleForm.roleId) {
    addError.value = '请选择角色'
    return
  }

  submitting.value = true
  try {
    const payload: { Phone: string; RoleId: string; Name?: string; MerchantId: string; StoreId: string } = {
      Phone: addForm.Phone,
      RoleId: roleForm.roleId,
      Name: addForm.Name || undefined,
      // 仅支持平台角色，按需传空字符串
      MerchantId: '',
      StoreId: '',
    }
    const assign = await OrganizationService.addTeamMembers(payload)
    if (isSuccess(assign)) {
      showToast('新增团队成员成功', 'success')
      closeAddModal()
      loadUsers()
    } else {
      addError.value = assign?.message || '新增失败'
    }
  } catch (e: any) {
    addError.value = e?.message || '接口异常'
  } finally {
    submitting.value = false
  }
}

/**
 * 函数级注释：显示轻提示
 * @param text 文本
 * @param type 类型：success/danger/secondary
 * @returns void
 */
function showToast(text: string, type: 'success' | 'danger' | 'secondary' = 'secondary') {
  toast.text = text
  toast.type = type
  toast.show = true
  setTimeout(() => { toast.show = false }, 2000)
}

onMounted(loadUsers)
</script>

<style scoped>
.header { display:flex; align-items:center; justify-content:space-between; }
.actions { display:flex; gap: var(--space-2); }
.filters { padding: var(--space-4); }
.filter-row { display:flex; align-items:center; gap: var(--space-3); }
.filter-label { color: var(--text-secondary); }
.flex-1 { flex: 1; min-width: 240px; }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 12px; border-bottom: 1px solid var(--border); }
.table thead th { text-align: left; color: var(--text-secondary); font-weight: 600; }
.data-row .actions { display:flex; gap: 8px; }

.link { color: var(--primary-600); cursor: pointer; text-decoration: underline; }

.badge { padding: 2px 8px; border-radius: var(--radius); font-size: var(--text-sm); }
.badge.active { background: var(--success-50); color: var(--success-700); }
.badge.inactive { background: var(--secondary-100); color: var(--text-secondary); }

.loading-row .loading { text-align:center; }
.spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }

.pagination { display:flex; align-items:center; justify-content:space-between; padding: var(--space-3); }
.pagination-info { color: var(--text-secondary); }

/* 弹窗 */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display:flex; align-items:center; justify-content:center; z-index: 1000; }
.modal { width: 520px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.modal-header { padding: var(--space-4); border-bottom: 1px solid var(--border); }
.modal-body { padding: var(--space-4); display:flex; flex-direction: column; gap: var(--space-3); }
.form-row { display:flex; flex-direction: column; gap: var(--space-2); }
.form-label { color: var(--text-secondary); }
.modal-footer { display:flex; justify-content:flex-end; gap: var(--space-2); padding: var(--space-4); border-top: 1px solid var(--border); }
.error-text { color: var(--danger-700); font-size: var(--text-sm); }

/* 轻提示 */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 10px 16px; border-radius: var(--radius); background: var(--card-bg); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-sm); z-index: 1001; }
.toast.success { border-color: var(--success-300); }
.toast.danger { border-color: var(--danger-300); }
</style>
